<template>
  <div>
    <div class="test-box">
      <h3>这是自定义的 Test.vue --- {{ username }}</h3>
      <button @click="changeName">修改用户名</button>
    </div>
    <div>123</div>
  </div>
</template>

<script>
//默认导出 固定写法
//.vue组件中的data不能指向对象
//data必须是一个函数
export default {
  data() {
    return {
      username: "admin",
    };
  },
  methods: {
    changeName() {
      //在组件中 this 表示当前组件的实例对象
      this.username = "娃哈哈";
    },
  },
  // 当前组件中的侦听器
  watch: {},
  // 当前组件中的计算属性
  computed: {},
  filters: {},
};
</script>

<style lang="less">
.test-box {
  background-color: pink;
  h3 {
    color: red;
  }
}
</style>

